import store from "@/store"
import {LabLayout} from "../../../store/enums/StoreEnums";
let getCfg = store.getters["lab/config"]
const LabLayoutService = {
    /**
     * @description initialize default layout
     */
    init: () => {
        LabLayoutService.initLayout()
        LabLayoutService.initHeader()
        LabLayoutService.initToolbar()
        LabLayoutService.initAside()
        LabLayoutService.initFooter()
        LabLayoutService.initApp()
    },
    initLayout: () => {
        store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_ATTRIBUTE, {
            qulifiedName: "id",
            value: "kt_body"
        });

        if (getCfg("loader.display")) {
            store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_CLASSNAME, "page-loading-enabled")
            store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_CLASSNAME, "page-loading")
        }
    },

    initHeader: () => {
        if (getCfg("header.fixed.desktop")) {
            store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_CLASSNAME, "header-fixed")
        }

        if (getCfg("header.fixed.tabletAndMobile")) {
            store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_CLASSNAME, "header-tablet-and-mobile-fixed")
        }
    },

    initToolbar: () => {
        if (!getCfg("toolbar.display")) {
            return;
        }

        store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_CLASSNAME, "toolbar-enabled")

        if (getCfg("toolbar.fixed")) {
            store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_CLASSNAME, "toolbar-fixed")
        }

        store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_CLASSNAME, "toolbar-tablet-and-mobile-fixed")
    },

    initAside: () => {
        if (!getCfg("aside.display")) {
            return;
        }

        // Enable Aside
        store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_CLASSNAME, "aside-enabled")

        // Minimized
        if (getCfg("aside.minimized") && getCfg("aside.toggle")) {
            store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_ATTRIBUTE, {
                qulifiedName: "data-kt-aside-minimize",
                value: "on",
            })
        }

        if (getCfg("aside.fixed")) {
            // Fixed Aside
            store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_CLASSNAME, "aside-fixed")
        }

        // Default minimized
        if (getCfg("aside.minimized")) {
            store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_ATTRIBUTE, {
                qulifiedName: "data-kt-aside-minimize",
                value: "on",
            })
        }
    },
    initFooter: () => {
        // Fixed header
        if (getCfg("footer.width") === "fixed") {
            store.dispatch("lab/" + LabLayout.Actions.ADD_BODY_CLASSNAME, "footer-fixed")
        }
    },
    initApp: () => {
        let classList = document.getElementById("app").classList
        // d-flex flex-column flex-root
        if (!classList.contains("d-flex")) {
            classList.add("d-flex")
        }
        if (!classList.contains("flex-column")) {
            classList.add("flex-column")
        }
        if (!classList.contains("flex-root")) {
            classList.add("flex-root")
        }
    },
    uninstallApp: () => {
        let classList = document.getElementById("app").classList
        // d-flex flex-column flex-root
        if (classList.contains("d-flex")) {
            classList.remove("d-flex")
        }
        if (classList.contains("flex-column")) {
            classList.remove("flex-column")
        }
        if (classList.contains("flex-root")) {
            classList.remove("flex-root")
        }
    }
}

export default LabLayoutService